<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="common/head :: head('新闻动态')"/>
<body>
<th:block th:include="common/head :: header('/web/news')"/>

<div class="page-main news-block1 ">
    <div class="block-center">
        <div class="common-block">
            <div class="common-block-title" style="padding-left: 27px;">
                <img class="common-block-title__ico" src="/img/icon01.png" />
                <span class="common-block-title__txt">新闻中心</span>
            </div>
            <!--<div class="common-block-content" th:with="list=${@webInfo.getCmsContentByKind('NEWS', '', 11)}">
                <div class="news-item" th:each="item : ${list}">
                    <a class="news-item-title" th:href="'/web/news/view/' + ${item.id}" th:text="${item.title}" th:title="${item.title}"></a>
                    <span class="news-item-time" th:text="${#dates.format(item.createTime, 'yyyy/MM/dd')}"></span>
                </div>
            </div>-->
            <div class="common-block-content">
                <div id="listWrap">

                </div>
                <div class="page-wrap" id="pageEl"></div>
            </div>
        </div>
    </div>
    <div class="block-hot">
        <div class="common-block">
            <div class="common-block-title " style="padding-left: 23px;">
                <img class="common-block-title__ico" src="/img/icon02.png" />
                <span class="common-block-title__txt">热门新闻</span>
            </div>
            <div class="common-block-content" th:with="list=${@webInfo.getCmsContentByKind('NEWS', '1', 10)}">
                <div class="hot-item" th:each="item,ti : ${list}">
                    <span class="hot-item-index" th:text="${ti.count}"></span>
                    <a class="hot-item-title" th:href="'/web/news/view/' + ${item.uuid}" th:text="${item.title}" th:title="${item.title}"></a>
                </div>
            </div>
        </div>
    </div>
</div>


<th:block th:include="common/head :: link"/>
<th:block th:include="common/head :: footer"/>
<th:block th:include="common/head :: float" />
</body>
<th:block th:replace="common/head :: float-js" />
<th:block th:replace="include :: laypage-js" />

<script th:inline="javascript">
    const pageSize = 10

    loadData(1)

    function loadData(pageNum){
        $.ajax({
            url: ctx + 'web/loadContentPage',
            type: 'post',
            data: {
                pageNum: pageNum,
                pageSize: pageSize,
                kind: 'NEWS'
            },
            dataType: 'json',
            success: function(res) {
                const pages = Math.ceil(res.total/pageSize)
                buildList(res.rows)

                laypage({
                    cont: 'pageEl',
                    curr: pageNum,
                    pages: pages,
                    jump: function(obj, first){
                        if(!first) {
                            loadData(obj.curr)
                        }
                    }
                })
            }
        })
    }


    function buildList(list) {
        $('#listWrap').html('')

        const htmls = []

        list.forEach(item => {
            htmls.push('<div class="news-item">')
            htmls.push('  <a class="news-item-title" title="'+item.title+'" href="/web/news/view/'+item.uuid+'">'+item.title+'</a>')
            htmls.push('  <a class="news-item-time">' + date(item.createTime, 'yyyy/MM/dd') + '</a>')
            htmls.push('</div>')
        })

        $('#listWrap').html(htmls.join(''))
    }
</script>
</html>

